<template>
    <div>
        <div>模糊搜索（拼音/中文）</div>
        <el-input v-model="content" @input="onInput"></el-input>
        <ul>
            <li
                v-for="(item, index) in list"
                :key="index"
                v-html="item.htmlName"
            ></li>
        </ul>
    </div>
</template>

<script setup>
    import PinyinMatch from "pinyin-match";
    import { ref } from "vue";

    const content = ref("");
    const arr = new Array(10).fill(1).map((item, index) => {
        return {
            name: "曾经沧海难为水除却巫山不是云" + index,
            htmlName: "曾经沧海难为水除却巫山不是云" + index,
        };
    });
    const list = ref(arr);
    const onInput = (val) => {
        list.value = arr.filter((item) => {
            const pass = PinyinMatch.match(item.name, val);
            if (pass) {
				const str = item.name.slice(pass[0], pass[1] + 1);
				console.log(str);
                item.htmlName = item.name.replace(
                    str,
                    `<span style="color: red;">${str}</span>`
                );
            } else {
                item.htmlName = item.name;
			}
			if (val) return pass;
			return true
        });
    };
    let test = "123曾经沧海难为水除却巫山不是云";

    const a = PinyinMatch.match(test, "23曾"); // [1, 3]
    console.log(test.slice(a[0], a[1] + 1));

    const b = PinyinMatch.match(test, "cjc"); // [3, 5]
    console.log(test.slice(b[0], b[1] + 1));
    const c = PinyinMatch.match(test, "sdjkelwqf"); // false
    console.log(c);
</script>

<style lang="less" scoped></style>
